<template>
  <div>
    <Container>
      <Swiper :swiperList="swiperList"></Swiper>
      <GridBox :GridData="iconData"></GridBox>
      <Title :TwoTitle="title"></Title>
      <Goods :goodsList="goodsList"></Goods>
      <div class="home_background"></div>
      <Title :TwoTitle="selectedTitle"></Title>
      <div class="home_overflow">
        <SelectedGoods :selectedData="selectedData"></SelectedGoods>
      </div>
      <div class="home_background"></div>
      <Title :TwoTitle="PopularTitle"></Title>
      <GoodsItem :goods="goods"></GoodsItem>
      <div class="home_container"></div>
    </Container>
  </div>
</template>

<script>
import Container from "../components/container/Container";//引入子组件（容器组件）
import Swiper from "../components/swiper/Swiper";//引入子组件 轮播图组件
import GridBox from "../components/grid/IconButtonBox";//引入子组件 宫格
import Title from "../components/title/Title.vue";//引入标题组件
import Goods from "../components/goodsList/GoodsList";//引入商品组件
import SelectedGoods from "../components/selected/SelectedGoods";//引入精选专题组件
import GoodsItem from "../components/goodsList/GoodsItem";//引入人气推荐组件
export default {
  name: 'Home',
  components: {//注册组件
    Container,//（容器组件）
    Swiper,//轮播图组件
    GridBox,//宫格组件
    Title,//标题组件
    Goods,//商品组件
    SelectedGoods,//精选专题组件
    GoodsItem,//引入人气推荐组件
  },
  data() {
    return {
      swiperList:[],//轮播图数据
      title:"全民砍价",
      selectedTitle:"精选专题",
      PopularTitle:"人气推荐",
      goodsList:[],//商品列表数据
      selectedData:[],//精选专题数据
      goods:[],//人气推荐数据
      iconData:[
        {img:require("../assets/grid/home_grid/icon.png"),title:"签到"},
        {img:require("../assets/grid/home_grid/liquan.png"),title:"礼券"},
        {img:require("../assets/grid/home_grid/bargain.png"),title:"砍价"},
        {img:require("../assets/grid/home_grid/zhuanlan.png"),title:"专栏"}
      ]
    }
  },
  mounted() {//挂载后
 
  // 请求轮播图数据
  this.$APIShow.swiper().then(res=>{
    // console.log(res.data.data);
    this.swiperList = res.data.data;
    }).catch(err=>{
      console.log(err);
    })

    // 商品列表数据
    this.$APIShow.shop().then(res=>{
    this.goodsList = res.data.data;
    this.goodsList = this.goodsList.splice(25,28);
    }).catch(err=>{
      console.log(err);
    })
    // 精选专题数据
     this.$APIShow.selected().then(res=>{
    // console.log(res.data.data);
    this.selectedData = res.data.data;
    }).catch(err=>{
      console.log(err);
    })

     // 商品列表数据
    this.$APIShow.shop().then(res=>{
    // console.log(res.data.data);
    this.goods = res.data.data;
    this.goods = this.goods.splice(24,28);
    
    }).catch(err=>{
      console.log(err);
    })
    // 精选专题数据
     this.$APIShow.selected().then(res=>{
    // console.log(res.data.data);
    this.selectedData = res.data.data;
    }).catch(err=>{
      console.log(err);
    })
  },
}
</script>      
<style lang="scss" scoped>
.home_container {
  width: 100%;
  height: 3.2rem;
}
.home_background {
  width: 100%;
  height: 0.5rem;
  background: whitesmoke;
}
.home_overflow {
  width: 100%;
  overflow: hidden;
}
</style>
